<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择人员</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main" align="center">
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this">选择人员</li>
                <li>选择部门</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show"><div id="emplist"></div></div>
                <div class="layui-tab-item"><div id="deptlist"></div></div>
            </div>
        </div>
    </div>
</div>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script>

    //右侧人员数据
    var rightempdata = [];

    //右侧部门数据
    var rightdeptdata = [];

    layui.use(['transfer','element'], function () {
        var transfer = layui.transfer;
        t = transfer;
        var element = layui.element;
        var $ = layui.$;

        //左侧人员数据
        var leftempdata = [];

        //左侧部门数据
        var leftdeptdata = [];

        //左侧人员数据
        $.ajax({
            type: "get",
            url: "/emp/select",
            async: false,
            dataType: "json",
            success: function (data) {
                leftempdata= data.data;
            },
            error: function (data) {
                layer.msg(data);
            }
        });

        //渲染
        transfer.render({
            elem: '#emplist'  //绑定元素
            , title: ['选择人员', '已选人员']
            , value: rightempdata   //初始选择内容
            , showSearch: true    //开启搜索
            , width: '39%'
            , parseData: function (res) {
                return {
                    "value": res.id             //数据值
                    , "title": res.name         //数据标题
                    , "disabled": res.disabled  //是否禁用
                    , "checked": res.checked    //是否选中
                }
            }
            , data: leftempdata
            , id: 'selectemp' //定义索引
        });

        //左侧部门数据
        $.ajax({
            type: "get",
            url: "/sys/dept/list",
            async: false,
            dataType: "json",
            success: function (data) {
                leftdeptdata= data.data;
            },
            error: function (data) {
                layer.msg(data);
            }
        });

        //渲染部门
        transfer.render({
            elem: '#deptlist'  //绑定元素
            , title: ['选择部门', '已选部门']
            , value: rightdeptdata   //初始选择内容
            , showSearch: true    //开启搜索
            , width: '39%'
            , parseData: function (res) {
                return {
                    "value": res.id             //数据值
                    , "title": res.name         //数据标题
                    , "disabled": res.disabled  //是否禁用
                    , "checked": res.checked    //是否选中
                }
            }
            , data: leftdeptdata
            , id: 'selectdept' //定义索引
        });
    });
</script>
</body>
</html>